<template>
  <div class="boxcard">
    <!-- 🔔 {{ billboard.content }} -->
    <!-- <div class="box"> -->
  <el-card class="box-card " >
   <b-navbar-item tag="div">
          <b-field position="is-centered">
            <b-input
              v-model="searchKey"
              class="s_input"
              width="80%"
              placeholder="搜索帖子、标签和用户"
              rounded
              clearable
              @keyup.enter.native="search()"
            />

            <p class="control">
              <b-button
                class="is-info"
                @click="search()"
              >检索
              </b-button>
            </p>
          </b-field>
        </b-navbar-item>
</el-card>

      <div>
    <!-- </div> -->
    </div>

    <div class="columns">
      <!-- 占据四分之三 -->
      <div class="column is-three-quarters">
        <TopicList></TopicList>
      </div>
      <div class="column ">
        <CardBar class="fixed"></CardBar>
      </div>
    </div>

  </div>
</template>

<script>
import { getBillboard } from '@/api/billboard'
import CardBar from '@/views/card/CardBar'
import PostList from '@/views/post/index'

export default {
  name: 'Home',
  components: { CardBar, TopicList: PostList },
  data () {
    return {
      searchKey: '',
      billboard: {
        content: ''
      }
    }
  },
  created () {
    this.fetchBillboard()
  },
  methods: {
    async fetchBillboard () {
      getBillboard().then((value) => {
        const { data } = value
        this.billboard = data
        // console.log(this.billboard)
      })
    },
    search () {
      console.log(this.token)
      if (this.searchKey.trim() === null || this.searchKey.trim() === '') {
        this.$message.info({
          showClose: true,
          message: '请输入关键字搜索！',
          type: 'warning'
        })
        return false
      }
      const key = this.searchKey
      // window.location.reload()
      this.$router.push({ path: '/home/search?key=' + key })
      // this.searchKey = '123'
      // console.log('已经跳转了')
    }
  }
}
</script>
<style lang="less" scoped>
.b1{
  width: 200px;
  height: 200px;
  background-color: rgb(184, 146, 146);
  position: absolute;
  top: 20px;
}

</style>
